<!-- 
References:
	http://html5doctor.com/video-canvas-magic/
	http://www.nihilogic.dk/labs/canvas2image/
	http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
	http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/
	http://www.lutzroeder.com/html5/
	http://jim.studt.net/canvastext/
	http://mrdoob.com/projects/multiuserpad/
-->
<!DOCTYPE html>
<html>
<head>
	<style>
		body {
			background: #111;
			color:#eee;
		}
		#c {
			width: 640px;
			height: 360px;
			float: left;
		}
		#v {
			display:none;
			width:640px;
			height:360px;
		}
		#main{
			width:650px;
			margin:auto;
		}
		.toolList{
			float:left;
			width:100%;
		}
	</style>
	<link href="css/ghindaVideoPlayer.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="main">
		<span id="testText">Video Write-On Annotations</span>
		<canvas id="c"></canvas><!-- the canvas -->
		<video width="640" height="360" autobuffer="true" controls="true" poster="http://www.travisberry.com/html5video/videos/demo/demoani1-poster.jpg" id="v" tabindex="0">
			<source src="videos/sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'>
			<source src="videos/sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
		</video>
		<!-- The video controls-->
		<div class="ghinda-video-controls">
			<a class="ghinda-video-play" title="Play/Pause"></a>
			<div class="ghinda-video-seek"></div>
			<!-- <div class="ghinda-video-timer">00:00</div> -->
			<div class="ghinda-volume-box">
				<div class="ghinda-volume-slider"></div>
				<a class="ghinda-volume-button" title="Mute/Unmute"></a>
			</div>
		</div>
		<!-- Draw controls -->
		<ul class="toolList">
			<li>Clear the canvas: <button type="button" id="clearCanvas">Clear</button></li>
			<li><span class="highlight">Choose a color: </span><button type="button" id="choosePurpleColors">Purple</button><button type="button" id="chooseGreenColors">Green</button><button type="button" id="chooseYellowColors">Yellow</button><button type="button" id="chooseBrownColors">Brown</button></li>
			<li><span class="highlight">Choose a size: </span><button type="button" id="chooseSmallSizes">Small</button><button type="button" id="chooseNormalSizes">Normal</button><button type="button" id="chooseLargeSizes">Large</button><button type="button" id="chooseHugeSizes">Huge</button></li>
			<li><button type="button" id="chooseWhiteColors">Eraser</button></li>
			<li><button type="button" id="chooseWhiteColors" onclick="writeText();">Text</button></li>
		</ul>
		<!-- Save image-->
		<div style="display: block; float:left;" id="buttoncontainer">
			<input type="button" value="Save PNG" id="savepngbtn">
			<input type="button" value="Convert to PNG" id="convertpngbtn">
			<br>
			<input type="button" value="Save BMP" id="savebmpbtn">
			<input type="button" value="Convert to BMP" id="convertbmpbtn">
			<br>
			<input type="button" value="Save JPEG" id="savejpegbtn">
			<input type="button" value="Convert to JPEG" id="convertjpegbtn">
		</div>
		<div style="display: none; font-style: italic;" id="textdownload">Now you can right click and download the image<br>
			<input type="button" value="Reset" id="resetbtn">
		</div>
	</div><!-- End #main -->
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script><!-- Needed by player controls-->
	<script type="text/javascript" src="js/canvas2image.min.js"></script><!-- Needed to save image to desktop-->
	<script type="text/javascript" src="js/base64.min.js"></script><!-- Needed to save image to desktop-->
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
	<script type="text/javascript" src="js/videoToCanvas.min.js"></script><!-- play video in canvas -->
	<script type="text/javascript" src="js/canvasDraw.min.js"></script><!-- draw in the canvas -->
	<script src="js/jquery.ghindaVideoPlayer.min.js"></script><!-- Player controls script-->
	<script>
		//instantiate player controls
		$(function() {
			$('#v').gVideo();
		});
	</script>
	<script type="text/javascript" src="js/saveImage.min.js"></script><!-- save images -->
	<script type="text/javascript" src="js/text.min.js"></script><!-- Library to help text -->
	<script type="text/javascript" src="js/addText.min.js"></script><!-- Add text to canvas -->
	<script type="text/javascript">
		//load the poster image
		$(window).load(function () {
			var canvas = document.getElementById("c");
			var context = canvas.getContext("2d");
			// create a new "image" set the source the same as the poster attr in the video
			var poster = new Image();
			poster.src = $('video').attr('poster');
			//draw the "image" to the canvas
			context.drawImage(poster, 0, 0);
		});
	</script>
</body>
</html>